<template>
  <div class="home">
    <header-panda firstPath="/" firstTitle="今日推荐"></header-panda>
    <div class="banner setPadTop">
      <swiper pandaclass="home-banner-swiper" :pandaobj="pandaBannerObj"  :key="setBanners.length">
        <router-link :to='data.url' tag="div" class="home-banner-item swiper-slide" v-for="data in setBanners" :key="data.id">
          <img :src="data.imageUrl" style="width: 100%;">
        </router-link>
      </swiper>
    </div>
    <div class="grids-v2" v-if="gridsV2.length">
      <div class="left-grids-v2">
        <div>
          <p>{{gridsV2[0].title}}</p>
          <p>{{gridsV2[0].text}}</p>
        </div>
        <img :src="gridsV2[0].imageUrl">
      </div>
      <div class="right-grids-v2">
        <div class="bg">
          <div>
            <p>{{gridsV2[1].title}}</p>
            <p>{{gridsV2[1].text}}</p>
          </div>
          <img :src="gridsV2[1].imageUrl" >
        </div>
        <div class="bg">
          <div>
            <p>{{gridsV2[2].title}}</p>
            <p>{{gridsV2[2].text}}</p>
          </div>
          <img :src="gridsV2[2].imageUrl" >
        </div>
      </div>
    </div>
    <router-link class="top-list" tag="div" to="/toplist">
      <div class="sidebar" >
        <img src="" alt="Hot" class="sidebar-img">
      </div>
      <swiper pandaclass="home-toplist-swiper" :pandaobj="pandaTopObj"  :key="topList.length">
        <div class="home-toplist-item swiper-slide" v-for="data in topList" :key="data.commodityId">
          <img :src="data.image" style="height: 70%;">
          <p class="title">{{data.qunTitle}}</p>
          <p class="price">￥<b>{{data.price}}</b></p>
        </div>
        <div class="home-toplist-item swiper-slide" style="padding-top: 40px;box-sizing: border-box;">
          <p class="title">更多商品</p>
          <p class="price">see-more</p>
        </div>
      </swiper>
    </router-link>
    <split-line :note="note"></split-line>
    <div class="cart-content" >
      <ul class="cart-list">
        <cart-item v-for="(item,index) in cartHomeList" :key="item.id + '-' + index"
        :img="item.image"
        :title="item.title"
        :price="item.price"
        :num="item.saleNum"
        :id="item.id"
        :weight="item.couponValue"
        :free-postage="item.isFreePostage"
        :platform="item.platform"
        ></cart-item>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex' // mapState 是vuex提供的切割函数，
// import searchInput from '@/components/Search'
import swiper from '@/components/Swiper'
import splitLine from '@/components/SplitLine'
import cartItem from '@/components/CartItem'
import headerPanda from '@/components/Header'
// import subNav from '@/components/SubNav'
export default {
  data () {
    return {
      pandaobj: {
        slidesPerView: 4,
        spaceBetween: 10
      },
      pandaBannerObj: {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true
      },
      pandaTopObj: {
        slidesPerView: 3
      }
    }
  },
  mounted () {
  },
  created () {
    this.getHomeAction()
  },
  methods: {
    ...mapActions('homedata', ['getHomeAction'])

  },
  computed: {
    ...mapState('homedata', ['banners', 'gridsV2', 'topList', 'note', 'cartHomeList']),
    setBanners () {
      return this.banners && this.banners.map(item => {
        if (item.url.includes('column')) {
          item.url = '/column/' + item.url.split('=')[1]
        } else {
          item.url = '/'
        }
        return item
      })
    }
  },
  components: {
    // searchInput,
    swiper,
    splitLine,
    cartItem,
    headerPanda
    // subNav
  }
}
</script>
<style lang="scss" scoped>
.grids-v2{
  display: flex;
  div{
    flex: 1;
    div{
      padding: 5px 0 0 13px;
      z-index: 1;
      position: relative;
      p{
        line-height: 0;
      }
      p:nth-of-type(1){
        font-size: 1.15rem;
        font-weight: bolder;
        color: #43240c;
      }
      p:nth-of-type(2){
        margin: 0 0 0 .35rem;
        font-size: .7rem;
        color: #ff9e55;
      }
    }
  }
  .left-grids-v2{
    position: relative;
    background-color: #fdf4e6;
    height: 8.4rem;
    margin: 5px;
    img{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 8rem;
      height: 8rem;
      z-index: 0;
    }
  }
  .right-grids-v2{
    display: flex;
    flex-direction: column;
    .bg{
      background-color: #eef9fc;
      margin: 5px;
    }
    div{
      position: relative;
      img{
        position: absolute;
        top: 0.6rem;
        right: 0rem;
        height: 3.40rem;
      }
    }
  }
}
.top-list{
  display: flex;
  height: 8.2rem;
  border-top: 1px solid #ccc;
  padding: 5px 0;
  .sidebar{
    width: 5rem;
    background-color: #fee44e;
    text-align: center;
    img{
      height: 5rem;
      margin-top: 1.5rem;
    }
  }
  .home-toplist-item{
    text-align: center;
    .title{
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: .29rem;
      color: #43240c;
      margin: 0;
    }
    .price{
      color: #fa585a;
      font-size: .43rem;
      margin: 0;
    }
  }
}

</style>
